<template>
	<view class="box">
		<my-top :title="userinfo.name ?  (userinfo.name + '的日程详情')  : ''" :isline='true' bgcolor='rgba(136, 155, 220, 1)'>
			<template slot="save">
				<view class="mybox" v-if="rules.relationId !='3'">
					<!-- <text @click="shares" class="iconfont todayfenxiang iconsize1"></text> -->
					<!-- <text @click="edit" class="iconfont todaybianji iconsize2"></text> -->
				</view>
			</template>
		</my-top>
		<view class="memberdetails ">
			<view class="top" v-if="!toshare">
				<view class="headerimg">
					<image :src="userinfo.logo?userinfo.logo:'../../../../static/img/asd.png'" mode=""></image>
				</view>
				<view class="header_title">
					<view class="title">
						<view class="name">{{userinfo.name}}</view>
						<view class="distraction">
							<text class="gender">{{userinfo.gender==1?'女':'男'}}</text>
							<text>{{userinfo.birthday}}</text>
						</view>
					</view>
					<view class="relation_distraction" @click="tofriends">
						<text>一位亲关注了他</text>
						<text class="iconfont todaybianji"></text>
					</view>
				</view>
			</view>
			<!-- <view class="request" v-if="toshare">
				<text>邀请TA关注宝宝的日程,一起记录,分享宝宝成长</text>
			</view> -->
			<view class="content">
				<view class="itembox" @click="changerole()">
					<i class="iconfont  todayyanse fontSize" :style="{'color':userinfo.color}"></i>
					<text class="title">日程表颜色</text>
					<text class="iconfont todaygengduo fontSizeRight"></text>
				</view>
				<view class="itembox" @click="qrcode()">
					<i class="iconfont  todayerweima_2 fontSize"></i>
					<text class="title">日程表二维码</text>
					<text class="iconfont todaygengduo fontSizeRight"></text>
				</view>
				<view class="itembox" @click="changerole()">
					<i class="iconfont  todaydaochu fontSize"></i>
					<text class="title">导入日历</text>
					<text class="iconfont todaygengduo fontSizeRight"></text>
				</view>
				<view class="showalert">
					已导入日历
				</view>
				<view class="itembox" v-for="(item,index) in schedule" :key='index'>
					<i class="iconfont todaydaochu"></i>
					<text class="title">{{item.name}}</text>
					<!-- <text class="iconfont  todaydaochu"></text> -->
				</view>
				<view class="itembox" v-if="isbaby">
					<i class="iconfont  todaychongfu"></i>
					<text class="title">您与宝宝名称的关系</text>
					<text class="distraction">{{userinfo.relationName}}</text>
				</view>
				<view class="itembox">
					<i class="iconfont  todaychengyuan fontSize"></i>
					<text class="title">日历共享成员</text>
					<text class="btnadd" @click="addmembershare()">添加成员</text>
				</view>
				<view class="oncetime" v-if="userinfo.shareList">
					<view class="public">
						<view class="list">
							<view class="list_item" @click="addmember(item)" v-for="(item,index) in userinfo.shareList" :key='index'>
								<view class="name">
									<image :src="item.logo !=''?item.logo:'http://wchat-qa.oss-cn-shanghai.aliyuncs.com/images/c34d12d5-7f53-4de2-bd84-6b5ca4db48a2.jpeg'"
									 mode=""></image>
									<text class="myfriderd">{{item.name}}</text>
								</view>
								<view class="juese" v-if="item.regulateId ==1">
									管理员
								</view>
								<view class="juese1" v-else-if="item.regulateId == 2">
									<text class="txt">编辑者</text>
									<text class="iconfont todaygengduo"></text>
								</view>
								<view class="juese1" v-else-if="item.regulateId == 3">
									<text class="txt">订阅者</text>
									<text class="iconfont todaygengduo"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<my-popup type="bottom" :animation='true' ref='popup'>
				<!-- 导入日历 -->
				<view class="popup-content">

					<view class="popupbox">
						<view class="popupitem">
							导入谷歌日历
						</view>
						<view class="popupitem">
							导入outlook日历
						</view>
						<view class="popupitem">
							导入本地日历
						</view>
					</view>
					<view class="quit">
						取消
					</view>

				</view>
			</my-popup>
			<view class="delmember" @click="deleteschedules">
				<text>
					删除日程
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex';
	import moment from "moment"
	export default {
		data() {
			return {
				rules: {
					srate: '',
					regulateId: ''
				},
				schedule: [{
						name: '本地日历'
					},
					{
						name: '谷歌日历'
					}
				],
				isbaby: false,
				title: '',
				toshare: false,
				templatedata: 1,
				userinfo: {
					id: '',
					relationId: ''
				},
				rolelist: [{
						name: '',
						type: 1,
						icon: '',
						distraction: '',
					},
					{
						name: '',
						type: 2,
						icon: '',
						distraction: '爸爸',
					},
					{
						name: '',
						type: 3,
						icon: '',
						distraction: '',
					}
				],
				memberlist: [

				],
				sharedata: {
					childId: '',
					regulateId: 2,
				},
			};
		},
		onLoad(e) {
			if (e.id) {
				this.rules = {
					regulateId: e.regulateId,
					state: e.state
				}
				this.userinfo.id = e.id;

				this.valinit(e.id);
			}
		},
		computed: {
			...mapState('initData', {
				// scheduleList: state => state.scheduleList,
				currentUser: state => state.currentUser,
			}),
		},
		methods: {
			qrcode() {
				uni.navigateTo({
					url: '../imagecode/imagecode?data=' + JSON.stringify(this.userinfo.id)
				})
			},
			// 删除日程
			async deleteschedules() {
				let id = this.userinfo.id;
				let result = this.deleteschedule(id);
				if (result) {
					uni.showToast({
						title: '删除成功'
					})
					setTimeout(() => {
						let data = this.SetSchedule()
						console.log('刷新日程表', data)
						uni.navigateBack({
							delta: 1
						})
					}, 200)
				} else {
					uni.showToast({
						title: '删除失败'
					})
				}
				// console.log('删除成功',result);

			},
			tofriends() {
				uni.navigateTo({
					url: '../friends/friends'
				})
			},
			addmembershare() {
				uni.navigateTo({
					url: '../share/share?id=' + this.userinfo.id
				})

				// uni.navigateTo({
				// 	url:'../decode/dcode'
				// })
			},
			fromdata(val) {
				console.log(val);
				if (val) {
					var a = val.split('-')[0];
					var b = new Date().getFullYear() - a;
					return b
				}
			},
			async valinit(val) {
				let list = await this.getIdSchedule(val);
				this.userinfo = list;
				let old = '';
				if (this.userinfo.birthday) {
					old = this.fromdata(this.userinfo.birthday);
					this.userinfo.birthday = old + '岁';
				} else {
					this.userinfo.birthday = '0岁'
				}
				if (old >= 12) {
					this.isbaby = false
				} else {
					this.userinfo.relationName = list.relationName;
					this.isbaby = true;
				}
				console.log('孩子日程列表', list);
			},
			...mapActions({
				getIdSchedule: 'initData/getIdSchedule',
				deleteschedule: 'initData/deleteschedule',
				SetSchedule: 'initData/SetSchedule',
			}),
			addmember(item) {

				// 当前的用户id     
				let currentUser = this.currentUser.userId;
				// 点击用户的id
				let currentid = item.userId;
				// 当前点击的权限
				let regulateId = item.regulateId;
				// 当前角色是什么权限
				let rules = this.rules;
				// 当前的孩子id
				let childId = this.userinfo.id;
				let url = '';
				// 是自己的日程
				if (rules.state == 1) {
					// 此为点击管理员
					if (currentUser == currentid && regulateId == 1) {
						url = '../editfriends/editfriends?status=' + regulateId + '&self=' + true + '&childId=' + childId +
							'&regulateId=' + rules.state
					} else {
						url = '../editfriends/editfriends?status=' + regulateId + '&self=' + false + '&childId=' + childId +
							'&regulateId=' + rules.state
					}
				} else { // 不是自己的日程
					// 此为点击管理员
					if (regulateId == 1) {
						console.log('管理员');
						return
					} else {
						console.log('非管理员');
						url = '../editfriends/editfriends?status=' + regulateId + '&self=' + true + '&childId=' + childId +
							'&regulateId=' + rules.state
					}
				}
				console.log(currentUser, rules.state, regulateId, rules, url);

				uni.navigateTo({
					url: url
				})
				return


				// 是自己
				if (this.currentUser.userId == item.userId && item.regulateId == 1) {
					uni.navigateTo({
						// http://localhost:8080/#/pages/template/addEditCalendar/editfriends/editfriends?status=1
						url: '../editfriends/editfriends?status=' + item.regulateId + '&self=' + tr + '&childId=' + this.userinfo.id +
							'&childUid=' + item.userId
					})
				} else if (this.currentUser.userId == item.userId) {
					uni.navigateTo({
						// http://localhost:8080/#/pages/template/addEditCalendar/editfriends/editfriends?status=1
						url: '../editfriends/editfriends?status=' + item.regulateId + '&self=' + false + '&childId=' + this.userinfo.id +
							'&childUid=' + item.userId
					})
				} else {
					console.log('没有权限', item.regulateId);
					uni.navigateTo({
						// http://localhost:8080/#/pages/template/addEditCalendar/editfriends/editfriends?status=1
						url: '../editfriends/editfriends?status=' + item.regulateId + '&self=' + false + '&childId=' + this.userinfo.id +
							'&childUid=' + item.userId
					})
				}
				// if(item.regulateId==1  ){
				// 	return false
				// }
				// addmember



				// 1.0.0 版本
				// uni.navigateTo({
				// 	url:'../memberdetails/memberdetails?childId='+ item.id + '&regulateId='+ item.regulateId
				// })

				// 
				// 1.0.1 版本

			},
			edit() {
				uni.navigateTo({
					url: '../add?type=updata&id=' + this.userinfo.id
				})
			},
			shares() {
				uni.navigateTo({
					url: '../share/share'
				})
			},
			changerole() {
				// if(item.type==1){
				this.$refs.popup.open()
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: $today-bg-color;
		min-height: 100vh;
	}

	.itembox:nth-child(2) {
		margin: 24rpx 0;
	}

	.itembox:nth-child(7) {
		border-bottom: 2rpx solid rgba(242, 242, 242, .6);
		margin-top: 24rpx;
	}

	.fontSizeRight {
		font-size: 40rpx;
		color: rgba(102, 102, 102, 1);
	}

	.fontSize {
		font-size: 40rpx;
		color: $today-addSchedule-text-color;
	}

	/deep/ .header_top {
		background-color: rgba(136, 155, 220, 1);
	}

	.mybox {
		display: flex;
		justify-content: flex-end;
		width: 100rpx;
		border: 1px solid reds;
		align-items: center;

		.iconsize1 {
			font-size: 38rpx;
		}

		.iconsize2 {
			color: #FFFFFF;
			font-size: 42rpx;
		}
	}

	.popup-content {
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.quit {
			width: 718rpx;
			margin-top: 18rpx;
			height: 85rpx;
			background-color: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			border-radius: 10rpx;
		}

		.popupbox {
			background-color: #FFFFFF;
			width: 718rpx;
			height: 283rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;

			.popupitem {
				height: 95rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.2);
				line-height: 94rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #121212;
				opacity: 1;

			}
		}

		// flex-flow: ;
	}

	.memberdetails {
		display: flex;
		flex-flow: column wrap;
		width: 750rpx;
		opacity: 1;
		height: 100%;

		.request {
			// width: 583rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 42rpx;
			color: #707070;
			opacity: 1;
			margin-bottom: 50rpx;
		}

		.top {
			display: flex;
			flex-direction: row;
			// justify-content: center;
			align-items: flex-end;
			text-align: center;
			padding: 53rpx 30rpx;
			// border: 1rpx solid red;
			height: 425rpx;
			background-color: rgba(136, 155, 220, 1);

			.header_title {
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: flex-end;
				margin-left: 16rpx;
				height: 90rpx;

				.relation_distraction {
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}

			.headerimg {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.title {
				display: flex;
				flex-direction: column;
				color: #FFFFFF;
				justify-content: flex-start;

				.name {
					text-align: left;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-bottom: 16rpx;
				}

				.distraction {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					opacity: 1;
					text-align: left;

					.gender {
						margin-right: 16rpx;
					}
				}
			}
		}



		.content {
			background-color: $today-bg-color;

			.showalert {
				padding-left: 24rpx;
				width: 100%;
				line-height: 58rpx;
				height: 58rpx;
				background: rgba(193, 193, 193, .2);
				font-size: 24rpx;
				color: rgba(242, 242, 242, .7);
			}

			.oncetime {
				display: flex;
				padding: 16rpx;
				box-sizing: border-box;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				min-height: 80rpx;
				opacity: 1;
				background-color: $today-addSchedule-bg-color;

				.itemcnt {
					display: flex;
					justify-content: space-between;
					padding-bottom: 8rpx;
					border-bottom: 1rpx solid red;

					.time1 {
						display: flex;
						align-items: center;
						flex: 2;

						.titleinput {
							flex: 2;
							padding-top: 2rpx;
							text-align: right;
						}
					}

					.data {
						height: 100%;
						display: block;
						height: 46rpx;
						line-height: 50rpx;
					}

					.time2 {
						flex: 1;
						display: flex;
						justify-content: center;
						display: flex;
						align-items: center;
					}

					.downup {}
				}

				.public {
					display: flex;
					justify-content: space-around;
					flex-flow: row wrap;

					.list {
						display: flex;
						flex-flow: row wrap;
						width: 100%;

						.list_item {
							margin-top: 16rpx;
							display: flex;
							justify-content: space-between;
							height: 60rpx;
							align-items: center;
							// background: #ffff00;
							width: 100%;

							.name {
								height: 60rpx;
								display: flex;
								align-items: center;
							}

							.myfriderd {
								height: 40rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 42rpx;
								color: #666666;
								opacity: 1;
								margin-left: 16rpx;
							}

							image {
								width: 60rpx;
								height: 60rpx;
								background: #DEDEDE;
								opacity: 1;

							}

							.juese {
								text-align: right;
								height: 40rpx;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								line-height: 42rpx;
								color: rgba(161, 159, 238, 1);
								opacity: 1;

							}

							.juese1 {
								text-align: right;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 400;
								display: flex;
								align-items: center;
								opacity: 1;

								.txt {
									margin-right: 16rpx;
								}
							}
						}
					}

					.selectlist {
						display: flex;

						.selectitem {
							margin: 10rpx 20rpx;
						}
					}
				}
			}

			.itembox {
				height: 85rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: $today-addSchedule-bg-color;
				// margin: 24rpx 0;
				padding: 0 24rpx;

				.btnadd {
					width: 180rpx;
					height: 57rpx;
					background-color: #889BDC;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
				}

				.borders {
					width: 19rpx;
					height: 19rpx;
					border: 2rpx solid #5555ff;
					border-radius: 50%;
					opacity: 1;
					margin-right: 16rpx;
				}

				.checkborders {
					border: 2rpx solid #5555ff;
					background-color: #5555ff;
				}

				.title {
					flex: 2;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: $today-addSchedule-text-color;
					opacity: 1;
					margin: 24rpx 24rpx;
				}

				.distraction {
					height: 33rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// line-height: 42rpx;
					color: #707070;
					opacity: 1;

				}
			}


		}


		.delmember {
			margin-top: 16rpx;
			text-align: center;
			opacity: 1;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
			color: rgba(255, 59, 48, 1);
			width: 100%;
			padding: 0 24rpx;

			text {
				border-radius: 20rpx;
				width: 720rpx;
				height: 80rpx;
				background-color: $today-addSchedule-bg-color;
				line-height: 80rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
